{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "3ef122ef-ca33-4362-9cad-a7995204a9f0",
   "metadata": {
    "tags": [
     "remove_cell"
    ]
   },
   "outputs": [],
   "source": [
    "import datapane as dp\n",
    "import warnings\n",
    "warnings.filterwarnings(\"ignore\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "f866037b-28e2-42f7-8358-b9233a53c9b2",
   "metadata": {},
   "source": [
    "# Groups and Grid layouts\n",
    "\n",
    "::: datapane.Group\n",
    "    options:\n",
    "          members:\n",
    "              - __init__"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "eba7d4ea-1474-4af1-a9c9-5ca20b3fd058",
   "metadata": {},
   "source": [
    "## Simple 2 column grid"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c18bd957-919c-4041-bf91-74ebccfce417",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "dp.Group(dp.Text(\"⬅️ Left side\"), dp.Text(\"➡️ Right side\"), columns=2)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3d1c392c-0a62-4b20-9316-af658ea66f83",
   "metadata": {},
   "source": [
    "## Plot and DataTable in a 2 column grid"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "699a36be-52de-4bb2-9b64-f9b05c1ed5ab",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "from vega_datasets import data\n",
    "\n",
    "df = data.iris()\n",
    "plot = (\n",
    "    alt.Chart(df)\n",
    "    .mark_point()\n",
    "    .encode(x=\"petalLength:Q\", y=\"petalWidth:Q\", color=\"species:N\")\n",
    ")\n",
    "\n",
    "dp.Group(dp.Plot(plot), dp.DataTable(df), columns=2)"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "id": "f0ae4a24-a67c-4826-aea4-de2626c4520d",
   "metadata": {},
   "source": [
    "## Populating a grid with a list of Blocks\n",
    "\n",
    "If you're generating your plots programmatically or have a lot of plots, you can pass them into the Group block as a list, using the `blocks` parameter. We can rewrite the previous example as follows:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "47fa0da6-85ee-40db-8a20-d10ed49d01fc",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "import altair as alt\n",
    "from vega_datasets import data\n",
    "\n",
    "df = data.iris()\n",
    "plot = (\n",
    "    alt.Chart(df)\n",
    "    .mark_point()\n",
    "    .encode(x=\"petalLength:Q\", y=\"petalWidth:Q\", color=\"species:N\")\n",
    ")\n",
    "\n",
    "# You could also generate these in a loop/function\n",
    "my_plots = [dp.Plot(plot), dp.DataTable(df)]\n",
    "\n",
    "dp.Group(blocks=my_plots, columns=2)"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
